<template>
  <div class="row">
    <div class="row title">input输入框 <span class="gray">（基于原生input封装）</span></div>
    <div class="input grid">
      <div>基础</div>
      <dw-input v-model="input1" placeholder="placeholder" />
      <div>禁用状态</div>
      <dw-input placeholder="禁用" disabled />
      <div>可清空</div>
      <dw-input v-model="input2" placeholder="可清空" clearable />
      <div>插槽</div>
      <dw-input v-model="input3" placeholder="头尾插槽">
        <template slot="prepend">http://</template>
        <template slot="append">.com</template>
      </dw-input>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input1: "",
      input2: "",
      input3: "",
    };
  },
};
</script>

<style scoped>
.gray {
  font-size: 0.7em;
  color: #999;
}
.row {
  margin-bottom: 20px;
}
.input {
  grid-template-columns: 100px 280px;
  grid-row-gap: 20px;
  align-items: center;
}
</style>
